<template>
  <div class="navi-input">
    <a-input
      v-if="edit"
      :value="value"
      @pressEnter="handleEnter"
      @blur="changeMode(false)"
      :autoFocus="true"
      style="height: 36px;"
    />
    <div v-else @click="changeMode(true)">
      <a-row type="flex" class="paths" align="middle">
        <img class="icon" src="/icons/default_folder.svg" alt="" />
        <div
          v-for="(item, index) in paths"
          :key="index"
          @click.stop="clickPath(index)"
        >
          <a-row type="flex" class="path" align="middle">
            <div>{{ item }}</div>
            <a-icon v-if="index < paths.length - 1" class="icon" type="right" />
          </a-row>
        </div>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      edit: false,
    }
  },
  methods: {
    clickPath(index) {
      this.edit = false
      let path = this.paths.slice(0, index + 1).reduce((total, path) => {
        if(total !== '/') path = '/' + path
        return total + path
      })
      if (path.endsWith(':')) path += '\\'
      this.$emit('clickPath', path)
    },
    changeMode(mode) {
      this.edit = mode
    },
    handleEnter(e) {
      this.changeMode(false)
      this.$emit('pressEnter', e)
    },
  },
  computed: {
    paths() {
      const paths = this.value.replace(/\\/g, '/').split('/')
      if (paths[0].includes(':')) {
        paths[0] = paths[0].toUpperCase()
      }
      if (paths[paths.length - 1] === '') paths.pop()
      if (paths[0] === '') paths.shift()
      if (this.value.startsWith('/') && paths[0] !== '/') paths.unshift('/')
      return paths
    },
  },
}
</script>

<style lang="less" scoped>
.navi-input {
  .paths {
    border: 1px solid rgb(217, 217, 217);
    padding: 0 5px;
    border-radius: 4px;
    flex-wrap: nowrap;
    font-weight: 500;
    > .icon {
      width: 21px;
      height: 21px;
      margin-right: 8px;
    }
    .path {
      padding: 5px;
      flex-wrap: nowrap;
      font-size: 16px;
      .icon {
        margin-left: 5px;
        font-size: 8px;
      }
      &:hover {
        background-color: rgb(229, 243, 255);
      }
    }
  }
}
</style>
